const plugin = require('tailwindcss/plugin')
const selectorParser = require('postcss-selector-parser')

module.exports = {
  important: '#body',
  content: ['./index.html', './src/**/*.{vue,js}'],
  darkMode: 'class', // or false or 'class'
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
      xxl: '1920px'
    },
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['dark'],
    }
  },
  plugins: [
    plugin(function ({addVariant, prefix, e}) {
      addVariant('dark', ({modifySelectors, separator}) => {
        modifySelectors(({selector}) => {
          return selectorParser((selectors) => {
            selectors.walkClasses((sel) => {
              sel.value = `dark${separator}${sel.value}`
              sel.parent.insertBefore(sel, selectorParser().astSync(prefix('.dark-mode ')))
            })
          }).processSync(selector)
        })
      })
    })
  ],
}
